<template>
	<view class="content p30">
		<!--店门信息-->
		<view class="info bgc-fff z-flex p30">
			<u-image width="160rpx" height="160rpx" :src="orderInfo.productCover" border-radius="6"></u-image>
			<view class="_info z-flex z-flex-around">
				<view class="fs32 fwb">{{orderInfo.productName}}</view>
				<view class="c-999 fs24">
					<text>共一件，总计：</text>
					<text class="fs24 c-red">￥</text>
					<text class="c-red fs28 fwb">{{orderInfo.amount}}</text>
				</view>
			</view>
		</view>
		
		<!--导航-->
		<view v-if="orderInfo.status >= 2" class="bgc-fff p30 mt30 c-333 br12">
			<view><text>可核销次数：</text><text class="c-theme">{{orderInfo.writeOffCount}}</text></view>
			<view class="mt16"><text>已核销次数：</text><text class="c-666">{{orderInfo.finishCount}}</text></view>
			<view v-if="[2,3].includes(orderInfo.status) && orderInfo.writeOffCount > 0" class="z-flex z-flex-end">
				<view class="_status" @click="show = true"><text>去使用</text></view>
			</view>
		</view>

		<!--订单明细-->
		<view class="p30 bgc-fff fs30 br12 mt30 c-333">
			<view class="z-flex z-flex-align-c">
				<u-icon name="order" color="#1abc9c" size="36" class="u-icon-2"></u-icon>
				<view class="fs30 ml10">订单明细</view>
			</view>

			<view class="line mt20 mb20"></view>
			
			<view class="fs26 c-999"><text class="mr40">订单编号</text><text>{{orderInfo.code}}</text></view>
			<view class="fs26 c-999 mt16"><text class="mr40">交易编号</text><text>{{orderInfo.payOrderId}}</text></view>
			<view class="fs26 c-999 mt16"><text class="mr40">支付时间</text><text>{{orderInfo.payTime}}</text></view>
		</view>
		<u-popup v-model="show" mode="center" closeable border-radius="30" @close="handClose" @open="handOpen">
			<view class="_modal">
				<view class="t-c fs30"><text>核销二维码</text></view>
				<view class="t-c fs26 c-999 mt16 mb30"><text>剩余可核销次数：{{orderInfo.writeOffCount}}</text></view>
				<canvas style="width: 200px; height: 200px;margin: 0 auto;" canvas-id="myQrcode"></canvas>
				<view class="_time" @click="handReload">
					<text class="mr8">二维码<text class="c-red">{{countdown}}S</text>内有效 | </text>
					<u-icon name="reload"></u-icon>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { orderDetailApi } from '@/api/order.js'
	import drawQrcode from 'weapp-qrcode'
	let timer = null
	export default {
		data() {
			return {
				orderInfo: {},
				option: {},
				show: false,
				countdown: 60,
				userId: uni.getStorageSync('userId')
			}
		},
		onLoad(option) {
			option && (this.option = option)
		},
		onShow() {
			this.$nextTick(this.getOrderDetail)
		},
		beforeUnmount() {
			this.clearTimer()
		},
		methods: {
			async getOrderDetail(){
				uni.showLoading({
					title: '数据加载中...'
				})
				const {code,data} = await orderDetailApi({
					id: this.option.id
				})
				uni.hideLoading()
				if(code != 0) return
				this.orderInfo = data
			},
			getQrcode(){
				const that = this
				uni.showLoading({
					title: '二维码绘制中'
				})
				drawQrcode({
					width: 200,
					height: 200,
					canvasId: 'myQrcode',
					text: `https?a=${this.userId}&b=${this.orderInfo.id}`,
					callback:(res)=>{
						uni.hideLoading()
						this.onSetTimeout()
					}
				})
			},
			handClose(){
				this.clearTimer()
				this.countdown = 60
				this.getOrderDetail()
			},
			handOpen(){
				this.$nextTick(this.getQrcode)
			},
			handReload(){
				this.clearTimer()
				this.countdown = 60
				this.getQrcode()
			},
			onSetTimeout() {
				timer = setInterval(() => {
					this.countdown --
					if(this.countdown == 0){
						this.handReload()
					}
				}, 1000);
			},
			clearTimer() {
				if (timer) {
					clearInterval(timer);
					timer = null;
				}
			},
		}
	}
</script>

<style scoped lang="scss">

	.content {
		._status{
			border: 1rpx solid $uni-color-theme;
			color: $uni-color-theme;
			padding: 6rpx 18rpx;
			font-size: 24rpx;
			border-radius: 35rpx;
		}
		
		._time{
			margin: 30rpx auto;
			background-color: #F4F4F5;
			color: #999999;
			border-radius: 40rpx;
			padding: 10rpx 20rpx;
			font-size: 26rpx;
			text-align: center;
			max-width: 340rpx;
		}

		.info {
			width: 100%;
			box-sizing: border-box;
			border-radius: 12rpx;

			._info {
				flex-direction: column;
				box-sizing: border-box;
				flex: 1;
				padding: 0 0 0 20rpx;
			}
		}
		
		._modal{
			padding: 60rpx 60rpx 30rpx;
		}
	}

	.line {
		border: 1rpx solid #F0F0F0;
	}
</style>
